<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">账号密码登录</text>
		<uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger='blur'>
			<uni-forms-item name="username" >
				<uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入用户名/手机号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="password" >
				<uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入登录密码"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>

		<!-- 带选择框的隐私政策协议组件 -->
		<uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
		<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
		<!-- 忘记密码 -->
		<view class="link-box">
		
				<text class="forget">忘记了？</text>
				<text class="link" @click="toRetrievePwd">找回密码</text>
			
			<text class="link" @click="toRegister">注册账号</text>
			<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
		</view>
		<!-- 悬浮登录方式组件 -->
		<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
	</view>
</template>

<script>

	export default {
		
		data() {
			
			return {
				form: {
						role: '用户'
					},
					
					captcha: "",
					needCaptcha: false,
				rules: {
					// 对username字段进行必填验证
					// 对username字段进行必填验证
					username: {
						// username 字段的校验规则
						rules:[
							// 校验 username 不能为空
							{
								required: true,
								errorMessage: '请输入账号',
							},
							// 对username字段进行长度验证
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
					},
					password: {
						rules:[
							{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
					}
				}
				
			}
		},
		
		methods: {
			// 页面跳转，找回密码
			toRetrievePwd() {
				let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
				//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
				if (/^1\d{10}$/.test(this.username)) {
					url += `?phoneNumber=${this.username}`
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (this.needAgreements && !this.agree) {
					return this.$refs.agreements.popup(this.pwdLogin)
				}
				
				this.$refs.form.validate().then(res=>{
					this.$request.post('/login',this.form).then(res => {
						console.log(res)
						if (res.code === '200') {
							// 跳转页面
							uni.switchTab({
								url: '/pages/index/index'
							})
							uni.showToast({
								icon:'success',
								title: '登录成功！'
							})
							// 存储用户的数据到 storage
							uni.setStorageSync('weather2024', res.data)
						} else{
							uni.showToast({
								icon:'error',
								title: '用户名或密码错误！'
								
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				
			},
			/* 前往注册 */
			toRegister() {
				uni.navigateTo({
					url: 
						'/pages/register/register',
					fail(e) {
						console.error(e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			height: auto;
		}
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
</style>
